<template>
	<view class="container">
		<view class="header">
			<view class="profile">
				<image class="avatar" src="/static/images/avatar.png" mode="aspectFill" />
				<view class="info">
					<text class="name">{{ user.username }}</text>
					<text class="phone">{{ user.phone }}</text>
				</view>
			</view>
			<view class="icon-menu">
				<view class="icon-item" @click="navigateTo('allOrders')">
					<image class="icon" src="/static/images/all_orders.png" mode="aspectFill" />
					<text>全部订单</text>
				</view>
				<view class="icon-item" @click="navigateTo('pendingPayment')">
					<image class="icon" src="/static/images/pending_payment.png" mode="aspectFill" />
					<text>待付款</text>
				</view>
				<view class="icon-item" @click="navigateTo('pendingShipment')">
					<image class="icon" src="/static/images/pending_shipment.png" mode="aspectFill" />
					<text>待出行</text>
				</view>
				<view class="icon-item" @click="navigateTo('refund')">
					<image class="icon" src="/static/images/refund.png" mode="aspectFill" />
					<text>退款售后</text>
				</view>
			</view>
		</view>
		<view class="menu">
			<!-- v-show来判断是用户还是业务员 -->
			<view class="menu-item" @click="navigateTo('salesCenter')" v-if="isSalesMan">
				<image class="menu-icon" src="/static/images/member_center.png" mode="aspectFill" />
				<text class="menu-text">业务员中心</text>
			</view>
			<view class="menu-item" @click="navigateTo('personalInfo')">
				<image class="menu-icon" src="/static/images/personal_info.png" mode="aspectFill" />
				<text class="menu-text">个人信息</text>
			</view>
			<view class="menu-item" @click="navigateTo('userAgreement')">
				<image class="menu-icon" src="/static/images/user_agreement.png" mode="aspectFill" />
				<text class="menu-text">用户协议</text>
			</view>
		</view>
		<tabBarVue :current="current"></tabBarVue>
	</view>
	
</template>

<script>
	import tabBarVue from '../../../components/tabbar/tabbar.vue';
	export default {
		data() {
			return {
				current:2,
				user: {
					username:'',
					phone:123
				},
				isSalesMan:false
			};
		},
		components:{
			tabBarVue
		},
		onLoad() {
			this.isSalesMan=uni.getStorageSync("state")=="0"?true:false;
			this.user.username=uni.getStorageSync("userName");
			this.user.phone=uni.getStorageSync("linkTel");
		},
		onShow(){
		      uni.hideTabBar({
		        animation: false
		      })
		      this.current = 2   // 公告页面和我的页面根据需要传入对应的索引号
		}, 
		methods: {
			navigateTo(page) {
				switch (page) {
					//全部订单
					case 'allOrders':
						uni.navigateTo({
							url: '/common/pages/order/orderAttribute?tab='+ '全部订单'
						});
						break;
					//待付款
					case 'pendingPayment':
						uni.navigateTo({
							url: '/common/pages/order/orderAttribute?tab='+'待支付'
						});
						break;
					//待出行
					case 'pendingShipment':
						uni.navigateTo({
							url: '/common/pages/order/orderAttribute?tab='+'待出行'
						});
						break;
					//退款售后
					case 'refund':
						uni.navigateTo({
							// url: '/pages/salesman/refund/refund'
						});
						break;
						//业务员中心
					case 'salesCenter':
						uni.navigateTo({
							url: '/pages/salesman/center/center'
						});
						break;
						//个人信息
					case 'personalInfo':
						uni.navigateTo({
							url: '/pages/salesman/personalInfo/personalInfo'
						});
						break;
						//用户协议
					case 'userAgreement':
						uni.navigateTo({
							url: '/pages/user/userAgreement/userAgreement'
						});
						break;
					default:
						console.warn('Unknown page:', page);
				}
			}
		}
	};
</script>

<style>
	.container {
		background-color: #f5f5f5;
		padding: 0;
	}

	.header {
		background-color: #fff;
		padding: 20px;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.profile {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 1px solid #f0f0f0;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 18px;
		color: #333;
	}

	.phone {
		font-size: 14px;
		color: #999;
	}

	.icon-menu {
		display: flex;
		justify-content: space-around;
		padding-top: 20px;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		color: #666;
	}

	.icon {
		width: 40px;
		height: 40px;
		margin-bottom: 5px;
	}

	.menu {
		background-color: #fff;
		margin-top: 10px;
		border-radius: 10px;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

	.menu-text {
		font-size: 16px;
		color: #333;
	}
</style>